<script setup>
import navbar from '@/components/navbar.vue';
import comments from '@/components/comments.vue'
import {ref, reactive, onMounted, onBeforeMount, shallowRef} from 'vue'
import router from "@/router/index.js"
import {useRoute} from 'vue-router'
import {LoginStore} from '@/stores/index.js'
import {
  GetMovieDetailService,
  GetLikeAndScoreService
} from '@/api/movie.js'
import {
  CommentService,
} from '@/api/comment.js'

onBeforeMount(() => {
  data.movieId = route.query.id
})
onMounted(() => {
  getAllDataList()
  getCommentList()
})
const route = useRoute()
const store = LoginStore()
const data = reactive({
  movieId: Number,
  filmInfo: {},
  filmCommentList: [],
  total: 0,
  comments: [],
  disabled: null,
  change: 0,
  score: 0,
  loading: false
})

// 获取数据
const getAllDataList = async () => {
  const id = data.movieId
  console.log(id)
  await GetMovieDetailService(id)
      .then((res) => {
        console.log(res)
        data.filmInfo = res.data.data
      })
}


//获取评论
const getCommentList = async () => {
  const id = store.access_id
  const token = store.access_token
  // if(token){
  await CommentService()
      .then((res) => {
        console.log(res)
        data.comments = res.data.data
      })
  // }
}
const showMyCommentInput = (items) => {
  console.log(items)
}
const submitLike = async () => {
  data.change = 1
  data.loading = true
  const id = store.access_id
  await GetLikeAndScoreService(data.movieId, id, data.change)
      .then((res) => {
        console.log(res)
        data.loading = false
      })
      .catch((err) => {
        console.log(err)
      })
}
const submitunLike = async () => {
  data.change = 0
  data.loading = true
  const id = store.access_id
  await GetLikeAndScoreService(data.movieId, id, data.change)
      .then((res) => {
        console.log(res)
        data.loading = false
      })
      .catch((err) => {
        console.log(err)
      })
}

const valChange = (val) => {
  console.log(val)
  data.score = val

}
const clickScore = () => {
  ElMessageBox.confirm(
      '确定给这个电影的评分吗',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        const id = store.access_id

        GetLikeAndScoreService(data.movieId, id, data.change, data.score)
            .then((res) => {
              console.log(res)
              data.loading = false
            })
            .catch((err) => {
              console.log(err)
            })
      })
      .catch(() => {

      })
}
</script>

<template>
  <div class="xjt-film-detail-view">
    <div class="banner">
      <div class="wrapper">
        <div class="left movie-poster">
          <el-image
              class=""
              style="width: 250px; height: 100%"
              :src="data.filmInfo.cover_url"
              fit="fill"></el-image>
        </div>

        <div class="middle movie-brief-container">
          <div class="name">{{ data.filmInfo.title }}</div>
          <!--          <p class="fg_name">又名：{{ data.filmInfo.movieFgName }}</p>-->
          <!--          <p class="director">导演：{{ data.filmInfo.movieDirector }}</p>-->
          <p class="actor">主演：{{ data.filmInfo.actors }}</p>
          <p class="category">类型：{{ data.filmInfo.types }}</p>
          <p class="country">制片国家/地区：{{ data.filmInfo.regions }}</p>
          <p class="duration">片长：{{ data.filmInfo.run_time }}分钟</p>
          <p class="publish-time">上映时间：{{ data.filmInfo.release_date }}</p>
          <p class="publish-time">点评人数：{{ data.filmInfo.review_number }}人</p>
        </div>
        <div class="right">
          <div class="right-inner">
            <div class="action-buyBtn" v-loading="data.loading">
              <el-button type="default" v-if="data.change==1" @click="submitunLike">
                <svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg"
                     xmlns:cc="http://creativecommons.org/ns#"
                     xmlns:dc="http://purl.org/dc/elements/1.1/"
                     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                  <g transform="translate(0 -1028.4)">
                    <path
                        d="m7 1031.4c-1.5355 0-3.0784 0.5-4.25 1.7-2.3431 2.4-2.2788 6.1 0 8.5l9.25 9.8 9.25-9.8c2.279-2.4 2.343-6.1 0-8.5-2.343-2.3-6.157-2.3-8.5 0l-0.75 0.8-0.75-0.8c-1.172-1.2-2.7145-1.7-4.25-1.7z"
                        fill="#c0392b"/>
                  </g>
                </svg>
              </el-button>
              <el-button type="default" v-else @click="submitLike">
                <svg height="24" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1"
                     viewBox="0 0 512 512"
                     width="24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M340.8,83C307,83,276,98.8,256,124.8c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6  L245.1,418l10.9,11l10.9-11l148.3-149.8c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z"/></svg>
                喜欢
              </el-button>
            </div>

            <div class="movie-stats-container">
              <div class="demo-rate-block">
                <span class="demonstration">评分:{{ data.filmInfo.score }}</span>
                得分：
                <el-rate v-model="data.filmInfo.score" :colors="colors" disabled
                         show-score :max="10" allow-half text-color="#ff9900" size="large" @change="valChange"/>
              </div>
            </div>
            <div class="movie-stats-container">
              <div class="demo-rate-block">
                喜欢的就给个分吧：
                <el-rate v-model="data.score" :colors="colors" @click="clickScore"
                         show-score :max="10" allow-half text-color="#ff9900" size="large" @change="valChange"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-container">
      <navbar class="navBar">
        <template #left>剧情简介</template>
      </navbar>
      <p class="movie-introduce">
        {{ data.filmInfo.description }}
      </p>
      <navbar class="navBar">
        <template #left>观众评价</template>
      </navbar>
      <div>
        <comments :comment="data.comments" :disabled="data.disabled"></comments>
      </div>
    </div>
  </div>
</template>

<style scoped>
.xjt-film-detail-view {
  width: 100%;
  height: 100%;
}

.banner {
  width: 100%;
  height: 340px;
  background: #392f59 url("@/assets/image/banner_bg.png") no-repeat no-repeat;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  height: 376px;
  position: relative;
  display: flex;
}

.left {
  width: 250px;
  margin-left: 20px;
  margin-top: 20px;
  border: 4px solid #fff;
}

.middle {
  flex: 1;
  padding: 0 20px;
  color: white;
}

.name {
  line-height: 60px;
  font-size: 32px;
  font-weight: bold;
}

.actor {
  line-height: 20px;
}

.demo-rate-block {
  /*padding: 10px 0;*/
  /*text-align: center;*/
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}

.demo-rate-block:last-child {
  border-right: none;
}

.demo-rate-block .demonstration {
  display: block;
  color: yellow;
  font-size: 25px;
  margin-bottom: 20px;
}

.right {
  width: 400px;
  height: 320px;
  border-left: 1px solid #eeeeee;
  color: white;
}

.right-inner {
  margin-top: 60px;
  margin-left: 20px;
}

.movie-stats-container {
  margin-top: 20px;
}

.main-container {
  margin-top: 60px;
}

.navBar {
  border-left: 4px solid #ef4238;
  padding-left: 10px;
  font-size: 24px;
  font-weight: bold;
}

.movie-introduce {
  margin: 20px 50px 20px 20px;
  line-height: 30px;
}


</style>